<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import {getPsychologistList} from "@/api/consult.js";

const router = useRouter()
const list = ref([])
const currentPage = ref(1)
const pageSize = ref(8)
const total = ref(0)

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

// 获取列表数据
const getList = async () => {
  try {
    //TODO: 调用获取列表接口
    const res = await getPsychologistList({
      page: currentPage.value,
      size: pageSize.value
    })
    if (res.code === 200) {
      list.value = res.data.records
      total.value = res.data.total
    }
  } catch (error) {
    console.error('获取列表失败:', error)
  }
}

// 查看详情
// const viewDetail = (id) => {
//   router.push(`/psychological/detail/${id}`)
// }

// 处理页码改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  getList()
}

// 处理每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  getList()
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="psychological-list page-container">
    <div class="list-header">
      <h2>心理资讯</h2>
    </div>

    <div class="list-content">
      <el-row :gutter="20">
        <el-col :span="12" v-for="item in list" :key="item.id">
          <el-card class="news-card" shadow="hover">
            <div class="news-content">
              <h3 class="news-title">{{ item.title }}</h3>
              <p class="news-text">{{ item.content }}</p>
              <div class="news-footer">
                <span class="news-time">{{ formatTime(item.createTime) }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[8, 16, 24, 32]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.psychological-list {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);

  .list-header {
    margin-bottom: 24px;

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
      font-weight: 500;
    }
  }

  .list-content {
    margin-bottom: 24px;

    .news-card {
      margin-bottom: 20px;
      transition: all 0.3s;
      border: none;
      border-radius: 8px;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .news-content {
        .news-title {
          margin: 0 0 12px;
          font-size: 16px;
          color: #303133;
          font-weight: 500;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .news-text {
          margin: 0 0 16px;
          font-size: 14px;
          color: #606266;
          line-height: 1.6;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .news-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .news-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
}
</style>
